<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
var flag;

function checkId() {
	//XMLHttpRequest 생성
	var id = document.getElementById("id").value;
	var messageSpan = document.getElementById("idcheck_message");
	//id는 6글자 이상이어야하만 함.
	if(id.length < 6) {
		messageSpan.innerHTML = "<font color='red'>ID는 6글자 이상 입력하세요 </font>";
		return;y
	}
	//1. XMLHttpRequest 객체 생성
	if(window.ActiveXObject) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}else {
		xhr = new XMLHttpRequest();
	}
	//2. open
	xhr.open("POST", "/javascript/ajax/AjaxController", true);
	//3. callback 함수 등록
	xhr.onreadystatechange = callback;
	//4. 요청 header content-type 설정
	xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
	//5. 전송 - post : 요청 파라미터 매개변수로 설정
	xhr.send("cmd=idcheck&id="+id);

}

function join() {
	//만약에 사용할 수 없는 ID이면 전송이 안되게 처리
	if(flag) {//true : 사용 못하는 ID
 		alert("사용할 수 없는 아이디 입니다.");
		return false;
		
	}	
}



function callback() {
	//응답이 왔으면
	if(xhr.readyState == 4) {
		//정상 응답이라면
		if(xhr.status == 200) {
			var value= xhr.responseText;
			flag = eval(xhr.responseText);
			var span = document.getElementById("idcheck_message");
			// boolean 값이 아니고 String값이다 왜냐하면 printWriter로 받은 값이기 때문에

			if(flag) {// 사용 못하는 ID
				span.innerHTML ="<font color='red'>이미 등록된 ID입니다.</font>";
				
			}else {//사용 가능한 ID
			span.innerHTML="사용가능한 ID입니다.";
			
			} 
		}else {
			alert("중복 검사중 오류 발생");
		}
	}
}




</script>
</head>
<body>
<h2>회원가입</h2>
<form action="JoinMember" method="post" onsubmit="return join();">
	ID: <input type="text" name="id" onkeyup="checkId()" id="id"> <span id="idcheck_message"></span>
</form>
	<p>
	나머지 입력양식
	</p>
	
	<input type="submit" value="가입">
</body>
</html>